import { useEffect, useState } from 'react'
import {
  NavBar,
  Icon,
  WingBlank,
  WhiteSpace,
  InputItem,
  Button,
  Toast,
} from 'antd-mobile'

import { reqPhoneCode, reqVerifyCode } from '../../../api/register'
import { codeReg } from '../../../utils/regs'
import msg from './msg.png'
import './index.less'

const MAX_TIME = 60

function CodeRegister({ history, location }) {
  //验证码发送倒计时
  const [time, setTime] = useState(MAX_TIME)
  //是否发送过验证码
  const [isSendCode, setIsSendCode] = useState(true)
  //验证码
  const [code, setCode] = useState('')
  //下一步的按钮禁用状态
  const [disabled, setDisabled] = useState(true)

  useEffect(() => {
    //挂组件挂载或更新完成,修改发送验证码倒计时,time为1时切换按钮
    const timer = setTimeout(() => {
      if (time === 1) {
        setIsSendCode(false)
        return
      }
      setTime(time - 1)
    }, 1000)
    return () => {
      clearTimeout(timer)
    }
  }, [time])

  //组件挂载完成发送验证码
  useEffect(() => {
    reqPhoneCode(location.state)
  }, [location.state])

  //发送请求,获取验证码
  const sendCode = async () => {
    try {
      setIsSendCode(true)
      setTime(MAX_TIME)
      await reqPhoneCode(location.state)
    } catch (err) {
      Toast.fail('请求失败...')
    }
  }

  //验证码改变触发事件
  const handleCodeChange = (val) => {
    setCode(val)
    codeReg.test(val) ? setDisabled(false) : setDisabled(true)
  }

  //下一步按钮触发事件
  const next = async () => {
    try {
      const res = await reqVerifyCode(location.state, code)
      if (res.data.code === 20000) {
        history.push('/register/password', location.state)
      } else {
        Toast.fail(res.data.message, 2)
      }
    } catch (err) {
      Toast.fail('请求失败...', 2)
    }
  }

  return (
    <div className="verify-code">
      <NavBar
        mode="light"
        icon={<Icon className="left-icon" type="left" />}
        onLeftClick={() => {
          history.goBack()
        }}
      >
        硅谷注册
      </NavBar>
      <WingBlank>
        <img className="verify-code-msg" src={msg} alt="msg" />
        <p className="verify-code-tip">
          我们将以短信或电话的形式将验证码发送给您，请注意接听0575/025/0592/010等开头的电话
        </p>
        <div className="verify-code-container">
          <InputItem
            placeholder="请输入手机验证码"
            value={code}
            onChange={handleCodeChange}
          />
          {isSendCode ? (
            <Button
              className="verify-code-btn verify-code-btn-disabled"
              disabled
            >
              重新发送({time}s)
            </Button>
          ) : (
            <Button className="verify-code-btn" onClick={sendCode}>
              发送验证码
            </Button>
          )}
        </div>
        <WhiteSpace size="xl" />
        <Button
          type="primary"
          className="btn"
          disabled={disabled}
          onClick={next}
        >
          下一步
        </Button>
        <span className="verify-code-question">
          遇到问题?请<span>联系客服</span>
        </span>
      </WingBlank>
    </div>
  )
}

export default CodeRegister
